let arr = [];//存储数据的数组
let tbody = document.querySelector(`tbody`);//下面的表格
let uname = document.querySelector(`.uname`);//名字
let age = document.querySelector(`.age`);//姓名
let gender = document.querySelector(`.gender`);//性别
let salary = document.querySelector(`.salary`);//工资
let city = document.querySelector(`.city`);//城市
let btn = document.querySelector(`.add`);//按钮
//按钮的点击事件
btn.addEventListener(`click`, function (e) {
  e.preventDefault();
  if (uname.value == `` || age.value == `` || salary.value == ``) {
    alert(`没有填完哦`);
  } else {
    let man = {
      id: arr.length + 1,
      uname: uname.value,
      age: age.value,
      gender: gender.value,
      salary: salary.value,
      city: city.value
    }
    arr.push(man);
    tb();
  }
})
//表格渲染
//调整把列表数据从自动添加变为由数组添加
function tb() {
  tbody.innerHTML = ``;
  for (let i = 0; i < arr.length; i++) {
    let table = document.createElement(`tr`);
    table.innerHTML = `
  <td>${arr[i].id}</td>
  <td>${arr[i].uname}</td>
  <td>${arr[i].age}</td>
  <td>${arr[i].gender}</td>
  <td>${arr[i].salary}</td>
  <td>${arr[i].city}</td>
  <td>
    <a href="javascript:" data-id=${i} class="del">删除</a>
  </td>`
    tbody.appendChild(table);
  }
  del();
}
//获取a标签的自定义id然后根据id删数组数据
function del() {
  let as = document.querySelectorAll(`.del`);//删除
  for (let i = 0; i < as.length; i++) {
    as[i].addEventListener(`click`, function (e) {
      arr.splice(e.target.dataset.id, 1);
      tb();
    })
  }
}
tb();